use yew::{classes, function_component, html, Html, Properties};
use yew_router::components::Link;
use yewdux::{use_selector, use_store, Store};
use crate::business::im_router::{ImBlankRoute, ImMainRoute, ImRoute};
use crate::business::page::fragment::im_session_list_view::SessionListState;

#[function_component(Nav)]
pub fn nav() -> Html {
    let hot_message_total = use_selector(|store_state: &SessionListState| store_state.hot_message_total);
    let is_show = if *hot_message_total.clone() > 0 { "" } else { "hidden" };
    html! {
        <ul class="nav">
          <li class="nav-item align-items-center justify-content-center">
            <img src="/imgs/head.jpg" class="nav-user-icon img-fluid" />
          </li>
          <li class="nav-item">
            <Link<ImMainRoute> classes={classes!("nav-link")} to={ ImMainRoute::Message }>
                <div class="hot-message-total">
                    <NavLinkContent nav_value = { "_MessageSession_" } url1 = { "/imgs/message_green.svg" } url2 = { "/imgs/message.svg" } tip= { "消息" } class="session-message"/>
                    <span class={classes!("badge", "circle-badge", is_show) }> { *hot_message_total.clone() }</span>
                </div>
            </Link<ImMainRoute>>
          </li>
          <li class="nav-item">
            <Link<ImMainRoute> classes={classes!("nav-link")} to={ ImMainRoute::User }>
               // <img src="/imgs/contracts.svg" alt="通信录"/>
               <NavLinkContent nav_value = { "_User_" } url1 = { "/imgs/contracts_green.svg" } url2 = { "/imgs/contracts.svg" } tip= { "通信录" }/>
            </Link<ImMainRoute>>
          </li>
          <li class="nav-item">
            <Link<ImBlankRoute> classes={classes!("nav-link")} to={ ImBlankRoute::Login }>
               <img src="/imgs/collect.svg" alt="收藏"/>
            </Link<ImBlankRoute>>
          </li>
          <li class="nav-item">
            <Link<ImRoute> classes={classes!("nav-link")} to={ ImRoute::Demo }>
                <img src="/imgs/file.svg" alt="文件"/>
            </Link<ImRoute>>
          </li>
          <li class="nav-item">
            <Link<ImRoute> classes={classes!("nav-link")} to={ ImRoute::Demo }>
                <img src="/imgs/workbench.svg" alt="工作台"/>
            </Link<ImRoute>>
          </li>
          <li class="nav-item">
            <Link<ImRoute> classes={classes!("nav-link")} to={ ImRoute::Demo }>
                <img src="/imgs/setting.svg" alt="设置"/>
            </Link<ImRoute>>
          </li>

          <li class="nav-item grow"> </li>

          <li class="nav-item" style="margin-bottom: 30px">
            <Link<ImRoute> classes={classes!("nav-link")} to={ ImRoute::Demo }>
                <img src="/imgs/list.svg" alt="其他"/>
            </Link<ImRoute>>
          </li>
        </ul>
    }
}


#[derive(Properties, PartialEq, Clone)]
struct NavLinkContentProp {
    nav_value: &'static str,
    url1: &'static str,
    url2: &'static str,
    tip: &'static str,
    #[prop_or_default]
    class: &'static str,
}

#[function_component(NavLinkContent)]
fn nav_link_content(props: &NavLinkContentProp) -> Html {
    let (state, _) = use_store::<NavLinkIndicator>();
    let value = state.value;

    let nav_value = props.nav_value;
    let url1 = props.url1;
    let url2 = props.url2;
    let tip = props.tip;
    let class = props.class;

    if value == nav_value {
        html! {
            <img {class} src={url1} alt= { tip }/>
        }
    } else {
        html! {
            <img {class} src={url2} alt= { tip }/>
        }
    }
}

#[derive(Default, Clone, PartialEq, Store)]
pub struct NavLinkIndicator {
    pub value: &'static str,
}